<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<p>
    本节知识点： 父组件向子组件传值 <i> 使用:名称="值"  (v-bind 可简写成:)   </i>
    <br>   子组件向父组件传值 <i>使用$emit 传值 </i>
</p>


<div id="root">
    <input v-model="inputVal">
    <button @click="pushVal">提交</button>
    <ul>
        <todo-list v-for="(item,index) in content"
                   :item="item"
                   :index="index"
                   @delete="deleteVal">
        </todo-list>
    </ul>
</div>


</body>
<script>

    var TodoList = {
        props: ['item', 'index'],
        template: '<li @click="passVal"> {{item}}</li>',
        methods: {
            passVal: function () {
                this.$emit("delete", this.index);
            }
        }
    }

    var vue = new Vue({
        el: '#root',
        components: {
            TodoList: TodoList
        },
        data: {
            content: []
        }, methods: {
            pushVal: function () {
                this.content.push(this.inputVal);
                this.inputVal = "";
            },
            deleteVal: function (index) {
               this.content.splice(index,1);
            }
        }
    })


</script>
</html>